Assign the animation to an HTML element

If you have have created your keyframe declaration block, you are ready to assign the animation to an HTML element, or elements. There is a brief list of properties we need to define for our HTML element – in this case our image – to apply the animation we just created to it.

The first is animation-name which tells our image which set of keyframes to take on:

animation-name: obj;

 The second property is animation-duration. Our keyframes defined what will change over the course of the animation, but we haven’t indicated how long we’d like the animation to be until we set this property. Let’s set it to two seconds:

animation-name: obj;

 The default value of animation-duration is zero, which is why we need to set it to something else before we’ll see any animation happen. It can take values in seconds (s) or milliseconds (ms).

Our full CSS looks like this:

.mobile{
animation-name: obj;
animation-duration:1s;
}


@keyframes obj {
from {transform: translate(0);}
to {transform: translate(400px);}
}

 Success! We’ve just set up the minimum needed to create a CSS animation: a defined set of keyframes for our animation; an animation name assigned to a DOM element; and a declared duration for our animation.

# There are two additional properties I like to define explicitly for all my animations as well. It’s pretty rare to write an animation once and never have a need to edit, tweak or debug it shortly after, or even a long time afterwards. For that reason, I find it handy to always explicitly define my animation-timing-function and the animation-iteration-count for each animation I create.

animation-timing-function

The animation-timing-function property has a default value of ease. However, I encourage you to set this one explicitly because it has such an impact on the feel of an animation. (We’ll discuss this in more detail in chapter 3). For our simple car example, I’m going to set the timing function to ease-in:

animation-timing-function: ease-in;

animation-iteration-count

The animation-iteration-count property is also a good one to set yourself even if you're using the default value. This property determines how many times the animation will repeat and it very logically defaults to once.

animation-iteration-count: 1;

With those additions, our final CSS looks like this:

 

.mobile{
animation-name: obj;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
}
17
@keyframes obj{
from {transform: translate(0);}
to {transform: translate(400px);}
}